<template>
  <div class="confirm" v-show="showFlag">
    <div class="content">
      <div class="title">{{title}}</div>
      <div class="selcet">
        <span class="id">验证短信: </span><input type="text" placeholder="请输入验证短信" class="idInput"/>
      </div>
      <div class="btncont">
        <button type="button" class="btn space">确认</button>
        <button type="button" class="btn" @click="hide">取消</button>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    name: "confirm",
    data() {
      return {
        number: "",//身份证
        showFlag: false
      }
    },
    methods: {
      hide() {
        this.showFlag = false
      },
      show(){
        this.showFlag = true
      }
    },
    props: {
      title: {
        type: String,
        default: "身份证信息确认"
      }
    }
  }
</script>
<style scoped type="text/less" lang="less">
  .confirm {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100000;
    .content {
      width: 90%;
      height: 4.5rem;
      background: #449d44;
      margin: 2.5rem auto 0;
      text-align: center;
      border-radius: 4%;
      z-index: 10020;
      animation: scale .1s;
    }
    .title {
      text-align: center;
      width: 100%;
      height: 1rem;
      line-height: 1rem;
      color: black;
      background: #e5e5e5;
      border-radius: 4% 4% 0 0;
      font-size: .35rem;

    }
    .selcet {
      width: 100%;
      margin-top: .6rem;
      text-align: center;
      font-size: .32rem;
      color: #fff;
      .idInput {
        width: 3.3rem;
        height: .8rem;
        padding: 0 .2rem;
        vertical-align: center;
        -moz-user-select: none;
        border-radius: .09rem;
        -webkit-user-select: none;
        font-size: .32rem;
      }
    }
    .btncont {
      text-align: center;
      margin-top: .5rem;
      .btn {
        width: 1.5rem;
        height: .6rem;
        text-align: center;
        line-height: .6rem;
        font-size: .3rem;
        border-radius: .1rem;
        outline: none;
        border: none;

      }
      .space {
        margin-right: .5rem;
      }
    }
    .icon {
      font-size: 1.3rem;
      color: grey;
    }

  }

  .mode {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0);
    opacity: .2;

  }

  @keyframes scale {
    0% {
      -webkit-transform: scale(.95);
      transform: scale(.95);
    }
    50% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

  }

</style>
